

import {GetFirstLevelCategorys , GetCategoryPros  } from '@/api/modules/order'
import { useEffect, useState } from 'react';

import useBottomFresh from "@/hooks/useBottomFresh"


import './index.less'

const typeList = [
  {
    type:1,
    label: '综合推荐'
  },
  {
    type:2,
    label: '最新'
  },
  {
    type:3,
    label: '销量'
  },
  {
    type:4,
    label: '价格'
  }
]


const Order = ()=>{


  const [ list , setList] = useState([])
  const [ cur, setCur ] = useState(0)
  const [ cur2, setCur2 ] = useState(0)

  const {pageIdx , loading, isEnd , error , list:mainList , setPageIdx} = useBottomFresh(4 , GetCategoryPros, { CategoryId : 0, isSort : cur2},'')

  async function getList(){
    const data = await GetFirstLevelCategorys({Type:0})
    console.log(data);
    if(data.success==200){
      setList(data.data)
    }
  }

  function changeAcv(idx:Number){
    if(idx != cur){
      setCur(idx)
    }
  }

  useEffect(()=>{
    getList()
  },[])

  return(
    <>


    <div className='flex items-center text-xs tabs overflow-x-auto'>
    {
      list.map((item,idx:Number)=>{
        return (
          <div className={ idx==cur ? 'acv' : ''} onClick={()=>changeAcv(idx)} key={item.Id}>
            { item.CategoryName }
          </div>
        )
      })
    }
    </div>

    <div className='text-xs flex items-center place-content-between typeList'>
      {
        typeList.map((item,idx)=>{
          return (
            <div key={idx} className={ idx==cur2 ?'acv' : ''} onClick={()=> setCur2(idx)}>{item.label}</div>
          )
        })
      }
    </div>

    <div className='box'>

      {
        mainList.map((item)=>{
          return (
            <div className='' key={item.Id}>
              {item.SellCount}
            </div>
          )
        })
      }
    </div>





    </>
  )
}



export default Order;